﻿<div style="@StyleString">

    <Alert ShowBar="true">此页面布局未做移动端适配，请在电脑端查看，直接更改调整区域内设置立即生效</Alert>

    <p>整页面级别组件</p>

    <p>通过内置组件 <code>Layout</code> 进行整页面布局</p>

    <div class="page-layout-demo-option">
        <p>布局调整</p>
        <Radio Items="@SideBarItems" OnStateChanged="@OnSideChanged" />
        <Checkbox TItem="bool" @bind-Value="ShowFooter" OnStateChanged="OnFooterChanged" DisplayText="显示页脚" />
    </div>

    <div class="page-layout-demo-option">
        <p>固定调整</p>
        <Checkbox TItem="bool" @bind-Value="@IsFixedHeader" OnStateChanged="@OnHeaderStateChanged" DisplayText="固定页头" class="mr-3" />
        <Checkbox TItem="bool" @bind-Value="@IsFixedFooter" OnStateChanged="@OnFooterStateChanged" DisplayText="固定页脚" />
    </div>

    <div class="page-layout-demo-option">
        <p>收缩调整</p>
        <div>请点击 <code>Header</code> 中的绿色小按钮</div>
    </div>

    <div class="page-layout-demo-option">
        <p>高度调整</p>
        <div class="page-layout-demo-option-height">
            <span>视图高度</span>
            <Slider @bind-Value="@Height" style="margin: 0 1rem;" />
            <BootstrapInput Value="@(Height * 100)" readonly style="width: 80px;" />
        </div>
    </div>

    <div class="page-layout-demo-option">
        <p>布局代码</p>
        <Tab>
            <TabItems>
                <TabItem Text="组件文件(PageLayout.razor)">
                    <Pre CodeFile="layout.6.html"></Pre>
                </TabItem>
                <TabItem Text="后台文件(PageLayout.razor.cs)">
                    <Pre CodeFile="layout.7.html"></Pre>
                </TabItem>
                <TabItem Text="页面文件(Demo.razor)">
                    <Alert>请注意：开发过程中设置 <code>layout</code> 即可继承上面设置的布局，功能页面中仅实现自己功能即可</Alert>
                    <Pre CodeFile="layout.8.html"></Pre>
                </TabItem>
            </TabItems>
        </Tab>
    </div>
</div>
